<template>
  <ul class="operator-output-tree">
    <li v-for="(output, index) in interfaces" :key="index">
      <header>
        <a-icon
          class="collapsible-icon"
          :type="output.collapsed ? 'down' : 'right'"
          @click="output.collapsed = !output.collapsed"
        />
        {{ output.tableName.length > 0 ? output.tableName : '未命名' }}
      </header>
      <!-- 接口内容 -->
      <div v-if="output.collapsed" class="content">
        <div class="row">
          <div class="label">表名称：</div>
          <div class="input">
            <a-input v-model="output.tableName" disabled placeholder="请输入..." />
          </div>
        </div>
        <div class="row-tree">
          <div class="row-header">
            <a-icon
              class="collapsible-icon"
              :type="output.columnCollapsed ? 'down' : 'right'"
              @click="output.columnCollapsed = !output.columnCollapsed"
            />
            输出字段
          </div>
          <!-- 输出字段 item -->
          <div v-if="output.columnCollapsed" class="row-content">
            <div v-for="(col, i) in output.meta" :key="i" class="condition">
              <div class="cond-id">
                <a-input v-model="col.name" disabled placeholder="字段名..." />
              </div>
              <div class="cond">
                <a-select v-model="col.type"  disabled style="width: 100%;">
                  <a-select-option value="int2">int2</a-select-option>
                  <a-select-option value="int4">int4</a-select-option>
                  <a-select-option value="int8">int8</a-select-option>
                  <a-select-option value="float4">float4</a-select-option>
                  <a-select-option value="float8">float8</a-select-option>
                  <a-select-option value="text">text</a-select-option>
                  <a-select-option value="char">char</a-select-option>
                  <a-select-option value="varchar">varchar</a-select-option>
                </a-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component
export default class OperatorOutputTree extends Vue {
  @Prop() interfaces!: Array<any>
}
</script>

<style lang="less" scoped>
/* ul */
.operator-output-tree {
  font-size: 0.9rem;
  list-style-type: none;
  margin: 10px 0;
  padding: 0;

  > li:not(:first-child) {
    margin-top: 10px;
  }

  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: #179a16;
  }
}

/* 折叠箭头 */
.collapsible-icon {
  cursor: pointer;
  left: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  &:hover {
    color: #6570ff;
  }
}

header {
  height: 20px;
  padding: 0 25px;
  position: relative;
  /* 删除按钮 */
  .delete-btn {
    cursor: pointer;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);

    &:hover {
      color: #e74c3c;
    }
  }
}

/* 输出接口 字段 */
.content {
  padding-left: 25px;

  /* 每一个输出接口 */
  .row {
    display: flex;
    flex-direction: row;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    position: relative;

    .label {
      flex: 0 0 80px;
    }

    .input {
      flex: 1 1;
    }
  }
}

/* 每一个输出接口 all */
.row-tree {
  /*  */
  .row-header {
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    padding-left: 25px;
    position: relative;
    width: 100%;

    .add-btn {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  /* 输出字段 div */
  .row-content {
    box-sizing: border-box;
    padding-left: 25px;
    width: 100%;

    /* 输入字段 item */
    .condition {
      display: flex;
      flex-direction: row;
      height: 30px;
      margin: 5px 0;
      padding-right: 20px;
      position: relative;

      div {
        flex: 1 1;
        min-width: 0;
      }

      /* 间隔 */
      div:not(:first-child) {
        margin-left: 5px;
      }

      .cond-delete-btn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);

        &:hover {
          color: #e74c3c;
        }
      }
    }
  }
}
</style>
